<template>
  <div class="goods-item" @click="itemClick">
    <!-- 监听图片加载（@laod） -->
    <!-- img上处理首页的数据和推荐的数据 -->
    <!--
      goodsListItem.show && goodsListItem.show.img => 首页的图片
      goodsListItem.image => 详情页推荐图片
      v-lazy => 图片懒加载
    -->
    <img
      v-lazy="(goodsListItem.show && goodsListItem.show.img) || goodsListItem.image"
      @load="imgLoad"
    />
    <div class="goods-info">
      <p>{{ goodsListItem.title }}</p>
      <span class="price">{{goodsListItem.price}}</span>
      <span class="collect">{{goodsListItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsListItem: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  methods: {
    // 使用@load事件监听图片是否加载完成，当加载完成后使用事件总线发射事件给home
    imgLoad() {
      this.$bus.$emit('itemImgLoad')

      //方法一： 在首页进行判断，首页进行事件处理，当离开首页时取消事件的监听$off
      //方法二： 在goodsListItem里进行判断，首页监听首页的图片加载，详情页监听详情页的加载
      // if (this.$route.path.indexOf('/home')) {
      //   this.$bus.$emit('homeItemImgLoad')
      // } else if (this.$route.path.indexOf('/detail')) {
      //   this.$bus.$emit('detailItemImgLoad')
      // }
    },
    itemClick() {
      // 动态路由的方式
      // this.$router.push('/detail/' + this.goodsListItem.iid)
      // 传入query对象的方式
      this.$router.push({
        path: '/detail',
        query: {
          iid: this.goodsListItem.iid,
        },
      })
    },
  },
}
</script>

<style scoped>
.goods-item {
  padding-bottom: 40px;
  position: relative;

  width: 48%;
}
.goods-item img {
  width: 100%;
  border-radius: 5px;
}
.goods-info {
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}
.goods-info p {
  overflow: hidden;
  /* 超出部分文字用... */
  text-overflow: ellipsis;
  /* 文本超出不换行 */
  white-space: nowrap;
  margin-bottom: 3px;
}
.goods-info .price {
  color: var(--color-high-text);
  margin-right: 20px;
}
.goods-info .collect {
  position: relative;
}
.goods-info .collect::before {
  content: '';
  position: absolute;
  left: -15px;
  top: -1px;
  width: 14px;
  height: 14px;
  background: url('~assets/img/common/collect.svg') 0 0/14px 14px;
}
</style>